<template>
    <div>
        <el-tooltip v-if="content?.length > length" placement="top">
            <template #content>
                <slot name="text">
                    <p :style="`max-width: ${width}px`">{{ content }}</p>
                </slot>
            </template>
            <div>
                <slot name="value">
                    <span>
                        {{
                            content.length > length
                            ? `${content.substring(0, length)}...`
                            : content
                        }}
                    </span>
                </slot>
            </div>
        </el-tooltip>
        <span v-else>{{ content }}</span>
    </div>
</template>
<script setup name="Tooltip">
defineProps({
    content: { type: String, default: '' },
    length: { type: Number, default: 8 },
    width: { type: Number, default: 300 }
})
</script>